<template>
<div class="ll">
    <a-card class="card">
        <div class="card">
        <h1>修改密码</h1>
      <a-input type="password" placeholder="旧密码" v-model="oldpwd"/>
      <a-input type="password" placeholder="新密码" v-model="newpwd"/>
      <a-input type="password" placeholder="确认新密码" v-model="confirmpwd"/>
      <div>
          <a-button @click="submit">确认</a-button>
          <a-button @click="cancel">取消</a-button>
      </div>
        </div>
  </a-card>
</div>
  
</template>

<script>
export default {
data(){
    return{
        oldpwd:'',
        newpwd:'',
        confirmpwd: ''
    }
},
watch: {
    confirmpwd: "confirm",
},
methods: {
    submit: function() {
        console.log(this.oldpwd,this.newpwd);
        let ans = true;
        if (ans) {
             this.$message.success('This is a success message');
             this.$router.push({
                    path:'/'
                })
        } else {
            this.$message.error('This is an error message');
        }
        this.oldpwd = '';
        this.newpwd = '';
        this.confirmpwd = '';
    },
    cancel: function() {
        this.$router.push({
            path:'/'
        })
    },
    confirm: function() {
        if (this.oldpwd === this.newpwd) {
            this.$message.warning('新密码和旧密码相同，请重新修改');
            return;

        }
        if (this.confirmpwd.length >= this.newpwd.length){
            if(this.newpwd !== this.confirmpwd){
            this.$message.warning('This is an error message');
                } else {
            this.$message.success('This is a success message');
            }
        } 
    } 
}, 
}
</script>

<style>
.ll{
    margin-left: 450px;
}
.card {
    width: 400px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card > input,div {
    margin: 10px;   
}
.card > div:last-child > button:first-child {
   margin-top: 20px;
   margin-right: 80px;
   background-color: rgb(111, 231, 131) !important;
}
.card > div:last-child > button:last-child {
    margin-top: 20px;
    margin-left: 80px;
    background-color: rgb(111, 231, 131) !important;
}
</style>